<template>
	<view class="doctorDetail">
		<Navigation title="医生详情" background="#fff" rightType="share" />
		<image src="https://cwht.ricecs.cn/app/index/back-bg.png" class="w-f h-278" @click='back'></image>
		<view class="content ph-32 pt-40 ">
			<view class="detail pt-48 ph-40 pb-40"
				style="background-image: url('http://cwqd.ricecs.cn/admin-api/system/file/19/get/5a00566dfcd345660ce9590d1ebf5fb9e91ed7dd0c388f82f315528047bce0fc.png');border-radius: 32rpx;">
				<view>
					<view class="f jc-s-b">
						<image :src="detail.avatar" class="w-120 h-120 b-120 mr-24"></image>
						<view class="f f1 fd-c">
							<view class="f ai-c">
								<view class="fs-36 fw-600 text-color1 mr-12">{{ detail.name }}</view>
								<view class="f ai-c jc-c w-88 h-32 b-4 status">
									<image src="https://cwht.ricecs.cn/app/index/rest.png" class="w-20 h-20 mr-8">
									</image>
									<view class="fs-22 text-color5" v-if="detail.onlineStatus==1">在线</view>
									<view class="fs-22 text-color5" v-else>离线</view>
								</view>
							</view>
							<view class="f fc-w">
								<view class="h-32 ph-8 fs-20 text-color4 tag b-4 mt-12 mr-8"
									v-for="(item, index) in detail.labelNames" :key="index">{{
                                    item
                                }}</view>
							</view>
							<view class="f mt-14">
								<view class="fs-26 text-color2 mr-8">评分</view>
								<view class="fs-26 fw-600 text-color mr-24">{{detail.scores||0}}</view>
								<view class="fs-26 text-color2 mr-8">接诊量</view>
								<view class="fs-26 fw-600 text-color mr-24">{{detail.orderNum||0}}</view>
							</view>
						</view>
					</view>
					<view class="mt-40 fs-28 fw-600 text-color1">基本信息</view>
					<view class="f ai-c mt-20">
						<view class="fs-24 text-color4">执业编号：{{ detail.licenseNo }}</view>
						<view class="fs-24 text-color" @click="previewImage" style="margin-left: 10rpx;">查看执业证件</view>
					</view>
					<view class="fs-24 text-color4 mt-12"> 头衔：{{ detail.title }} </view>
					<view class="fs-24 text-color4 mt-12"> 擅长：{{ detail.skillingRemark }} </view>
					<view class="fs-24 text-color4 mt-12"> 简介：{{ detail.introduction }} </view>
				</view>
			</view>
			<view class="fw-600 fs-36 mt-44">问诊方式</view>
			<view class="f mt-20">
				<view class="w-218 h-130 b-12 way ph-20 pt-20 mr-16" v-for="(item, index) in wayList" :key="index"
					:class="index === wayCurt ? 'active' : ''" @click="changeWayCurt(index)">
					<image src="https://cwht.ricecs.cn/app/index/select.png" class="w-32 h-32 select"
						v-show="index === wayCurt">
					</image>
					<view class="fs-26 fw-600 text-color4">{{ item.name }}</view>
					<view class="f jc-s-b mt-14">
						<view class="fs-26 fw-600 text-color7">¥ {{ item.price }}</view>
						<image :src="item.img" class="w-40 h-40"></image>
					</view>
				</view>
			</view>
			<view class="serve mt-16 b-12 ph-28 pv-28">
				<view class="fs-30 fw-600 text-color4">服务说明</view>
				<view class="mt-12 fs-28 text-color3">{{content[wayCurt].remark}}</view>
			</view>
			<view class="f ai-c jc-s-b mt-32 mb-20">
				<view class="fs-36 fw-600 text-color4">问诊评价</view>
				<view class="fs-28 text-color3">{{commentCount}}条</view>
			</view>
			<view class="list mb-20 ph-28 pv-28 b-24" v-for="(item, index) in commentList" :key="index">
				<view class="f ai-c jc-s-b">
					<view class="f ai-c">
						<image :src="item.userAvatar" class="w-80 h-80 b-80 mr-16"></image>
						<view>
							<view class="fs-30 fw-600 text-color4">{{item.userNickname}}</view>
							<view class="fs-24 text-color3 mt-4">{{item.createTime}}</view>
						</view>
					</view>
					<view class="f">
						<image :src=" item.scores> index2 ?  starSelect: star" class="w-24 h-24 mr-8"
							v-for="(item2, index2) in 5" :key="index2"></image>
					</view>
				</view>
				<view class="mt-20 fs-28 text-color4">{{item.content}}</view>
			</view>
		</view>
		<view class="f ai-c jc-s-b bot w-f h-128 ph-40">
			<view class="f ai-c">
				<view class="fs-26 text-color4">合计：</view>
				<view class="fs-36 fw-600 text-color7">¥{{price}}</view>
			</view>
			<view class="w-300"> <u-button text="咨询医生" color="#FABB3C" shape="circle" @click="submit"
					v-if="detail.onlineStatus==1"></u-button> <u-button text="咨询医生" color="#ccc" shape="circle"
					v-else></u-button></view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, getCurrentInstance } from 'vue';
	import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	import { doctorDetail, orderConsult, commentPage, socialUser } from '@/services/api/index/index';
	import { dictDataType } from '@/services/api/dict';
	import img from '@/static/index/img.png';
	import tel from '@/static/index/tel.png';
	import video from '@/static/index/video.png';
	import star from '@/static/index/star.png';
	import starSelect from '@/static/index/star-select.png';
	import { getBaseUrl } from '@/utils/env';
	import { useAuthStore } from '@/store/modules/auth';
	const authStore = useAuthStore();
	const { proxy } = getCurrentInstance();
	const wayCurt = ref(0);
	const commentCount = ref(0);
	const rate = ref(3);
	const wayList = ref<any[]>([]);
	const id = ref('');
	const openid = ref('');
	const price = ref<number>(0);
	const detail = ref<any>('');
	const content = ref([])
	const commentList = ref<any[]>([]);
	const listParams = ref<any>({
		pageNo: 1,
		pageSize: 10,
	});

	onLoad((options : any) => {
		id.value = options.id;
		getInfo();
		getDetail();

	});
	async function getInfo() {
		const { data } = await dictDataType({ type: 'service_description' })
		if (data.length > 0) {
			content.value = data
		}
		
	}
	function previewImage() {
		uni.previewImage({
			urls: [detail.value.licenseUrl],
			current: 0,
		});
	}
	function back() {
		uni.navigateBack()
	}
	async function getDetail() {
		const { data } = await doctorDetail({ id: id.value });
		const res=await dictDataType({type:'doctor_model'})
		data.labelNames = data.labelNames.split(',');
		data.scores = data.scores ? Number(data.scores).toFixed(1) : 0
		detail.value = data;
		if (detail.value.imageConsultation) {
			for(var i in res.data){
				if(res.data[i].label=='图文问诊'&&res.data[i].remark=='1'){
					wayList.value.push({
						name: '图文问诊',
						price: detail.value.imageConsultationFee,
						img: img,
						value: 1
					});
				}
			}
			
		}
		if (detail.value.phoneConsultation) {
			for(var i in res.data){
				if(res.data[i].label=='电话问诊'&&res.data[i].remark=='1'){
					wayList.value.push({
						name: '电话问诊',
						price: detail.value.imageConsultationFee,
						img: tel,
						value: 2
					});
				}
			}
			
		}
		if (detail.value.voiceConsultation) {
			for(var i in res.data){
				if(res.data[i].label=='音频问诊'&&res.data[i].remark=='1'){
					wayList.value.push({
						name: '音频问诊',
						price: detail.value.imageConsultationFee,
						img: video,
						value: 3
					});
				}
			}
			
		}
		price.value = wayList.value[0]['price']
		getComment()

	}
	//提交
	async function submit() {
		if (wayList.value.length == 0) {
			uni.showToast({
				title: '不可咨询',
				icon: 'none',
			});
		}
		if (detail.value.onlineStatus == 0) {
			uni.showToast({
				title: '当前医生已离线',
				icon: 'none',
			});
		}
		let consultType = wayCurt.value + 1;
		// const { data } = await orderConsult({
		//  doctorId:detail.value.id,
		//  consultType:consultType,
		//  terminal:id.value,
		//  // orderMobile:id.value,
		// });

		// uni.navigateTo({
		// 	url: '/pages_serve/chat/selectPet?buy_order=1&doctorId=' + detail.value.id + '&consultType=' + consultType + '&terminal=' + id.value + '&totalPrice=' + price.value,
		// });
		console.log(wayList.value, 123)
		uni.$u.route({
			url: '/pages_serve/chat/selectPet',
			params: {
				buy_order: 1,
				doctorId: detail.value.id,
				terminal: id.value,
				totalPrice: price.value,
				consultType: wayList.value[wayCurt.value].value
			}
		})
	}
	//下拉刷新
	onPullDownRefresh(() => {
		commentList.value = [];
		listParams.value.pageNo = 1;
		getComment();
	});
	//上拉加载
	onReachBottom(() => {
		listParams.value.pageNo++;
		getComment();
	});
	async function getComment() {
		let data2 = {
			...listParams.value,
			doctorId: detail.value.id
		}
		const { data } = await commentPage(data2);
		uni.stopPullDownRefresh();
		data.list.forEach((item : any) => {
			item.createTime = proxy.$moment(item.createTime).format('YYYY.MM.DD HH:mm:ss');
		});
		commentList.value = commentList.value.concat(data.list);
		commentCount.value = data.total
	}


	const changeWayCurt = (data : number) => {
		console.log(data)
		wayCurt.value = data;
		price.value = wayList.value[data]['price']
	};
</script>
<style lang="scss" scoped>
	.doctorDetail {
		background-image: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);

		.bot {
			position: fixed;
			left: 0;
			bottom: 0;
			background: #fff;

			::v-deep .u-button__text {
				font-size: 32rpx !important;
				font-weight: 600 !important;
			}

			::v-deep .u-button {
				height: 88rpx !important;
			}
		}

		.content {
			position: relative;
			top: -278rpx;

			.list {
				background: #fff;
			}

			.serve {
				border: 1rpx solid #f0f0f0;
			}

			.way {
				border: 2rpx solid #f0f0f0;
				position: relative;

				.select {
					position: absolute;
					right: 0;
					top: 0;
				}
			}

			.active {
				background-image: url('https://cwht.ricecs.cn/app/jx.png');
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100%;
				border: none;
			}

			.detail {
				//position: absolute;
				width: 100%;
				left: 0;
				top: 0;

				.tag {
					background: #eadacd;
				}

				.status {
					background: #25b85b;
				}
			}
		}
	}
</style>